@use "@/common/styles/colors"

.file-renderer
  height: 100%
  width: 100%

  .drag-overlay
    position: absolute
    width: 100%
    height: 100%
    display: flex
    justify-content: center
    align-items: center
    background-color: rgba(0, 0, 0, 0.8)
    backdrop-filter: blur(0.5rem)
    color: colors.$white
    font-size: 1.5rem
    z-index: 10

    .drag-item
      padding: 4rem 2rem
      width: 20rem
      border: 0.2rem dashed colors.$primary
      border-radius: 1rem
      display: flex
      flex-direction: column
      align-items: center
      gap: 2rem
      background-color: rgba(49, 75, 211, 0.1)
      backdrop-filter: blur(0.2rem)
      animation: bounceIn 0.3s ease

      h2
        margin: 0
        font-weight: 600
        text-align: center
        color: colors.$primary

      svg
        width: 8rem
        color: colors.$primary
        animation: pulse 2s infinite


  .file-manager
    height: calc(100% - 0.5rem)
    display: flex
    flex-direction: column

  .upload-progress
    height: 0.5rem
    border-top-left-radius: 0.1rem
    border-top-right-radius: 0.1rem
    background-color: colors.$primary